<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>AJAX APIs Interactive Samples</title>
    <link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" charset="utf-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body style="height:80%;">

    <div id="outputDiv" style="position:absolute;width: 98%;height:98%;">

      <div id="outputDrag">
        <h2>
          <table style="width: 100%;">
            <tbody>
              <tr>
                <td>
                  <span style="cursor: pointer;" onclick="runCode();" id="run">Run <img src="images/play10x10.png"/></span>
                </td>
                <td id="runBoxTitle">Output</td>
                <td align="right">
                  <span style="cursor: pointer;" id="popin" onclick="closeMe();"><img src="images/pop-in.gif" alt="Pop-in"/></span>
                </td>
              </tr>
            </tbody>
          </table>
        </h2>
      </div>
      <div id="runbox"></div>
    </div>

    <script type="text/javascript" charset="utf-8">
    var dad = window.opener;

    var runBox = $('#runbox');
    function resizeIframe() {
      var newHeight = $('#outputDiv').height() - $('#outputDrag').height() - 1;
      $('#runFrame').css('height', newHeight + 'px');
    }

    function runCode() {
      // This sets is.codeToRun
      dad.is.runCode();
    }

    function addIframe(boilerplateLoc) {
      // This iframe reads is.codeToRun
      var iFrameHTML = '<iframe src="'+boilerplateLoc+'" id="runFrame"><\/iframe>';
      // TODO: this needs to be the location of the boilerplate HTML
      var newFrame = $(iFrameHTML).get(0);
      $(runBox).html(newFrame);
      window.resizeIframe();
    }


    function closeMe() {
      window.close();
    }

    $(window).bind('unload', function() {
      dad.is.runBox.changeToInline();
    });

    $(window).bind('resize', function() {
      window.resizeIframe();
    });

    // onload function
    $(function () {
      runCode();
    });
    </script>
  </body>
</html>
